<template>
  <div class="announcement-container">
    <div class="announcement-section" v-for="section in sections" :key="section.title">
      <div class="section-header">
        <h2>{{ section.title }}</h2>
        <router-link to="/announcement/list" class="more-link">
          更多》
        </router-link>
      </div>
      <ul class="announcement-list">
        <li v-for="item in section.items" :key="item.id">
          <div class="announcement-item">
            <span class="icon"><img src="/public/images/pic3.png"></span>
            <span class="title">{{ item.title }}</span>
            <span class="date">{{ item.date }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnnouncementSection',
  data() {
    return {
      sections: [
        {
          title: '招标预告',
          items: [
            { id: 1, title: '【麻城市中心】麻城经济开发区谌家园小学建设项目招标预公告', date: '2023-04-13' },
            { id: 2, title: '【麻城市中心】麻城市农村公路管理局招标计划', date: '2023-04-13' },
            { id: 3, title: '【麻城市中心】麻城经济技术开发区谌家园小学及附属幼儿园建设项目招标预公告', date: '2023-04-13' },
            { id: 4, title: '【汉川市中心】汉川电厂四期扩建工程电力和水管网线路迁改建设工程', date: '2023-04-13' },
            { id: 5, title: '【红安县中心】红安县2023年度小型水库安全监测项目设计采购施工总承包（EPC）', date: '2023-04-13' }
          ]
        },
        {
          title: '招标公告',
          items: [
            { id: 6, title: '平煤隆基新能源科技有限公司——二期硅烷气系统改造项目', date: '2023-04-13' },
            { id: 7, title: '【2023年第4批电气杂项件询价采购公告】', date: '2023-04-13' },
            { id: 8, title: '平煤隆基新能源科技有限公司——二期电控系统改造项目', date: '2023-04-13' },
            { id: 9, title: '云南省中医医院污水运维项目咨询邀请公告', date: '2023-04-13' },
            { id: 10, title: '平煤隆基新能源科技有限公司——动力厂房通风系统改造项目', date: '2023-04-13' }
          ]
        },
        {
          title: '中标公告',
          items: [
            { id: 11, title: '山东省淄博市山东鑫泉医药有限公司线路迁改工程中标公告', date: '2023-04-13' },
            { id: 12, title: '张家界旅游学校关于果盘/果盆/果篮的网上超市采购项目成交公告', date: '2023-04-13' },
            { id: 13, title: '长沙市芙蓉区朝阳小学关于其他广告服务的网上超市采购项目成交公告', date: '2023-04-13' },
            { id: 14, title: '沙沟村特色农产品电商综合服务中心建设项目中标公告', date: '2023-04-13' },
            { id: 15, title: '涟源市工贸中专关于LED头灯的网上超市采购项目成交公告', date: '2023-04-13' }
          ]
        },
        {
          title: '企业采购',
          items: [
            { id: 16, title: '慈利县三合镇国太桥中学关于新鲜水果的网上超市采购项目成交公告', date: '2023-04-13' },
            { id: 17, title: '兰陵县第七中学七中2023年保安经费成交公告', date: '2023-04-13' },
            { id: 18, title: '(XJ023041300027)CG-连接器询价采购结果公告', date: '2023-04-13' },
            { id: 19, title: '岳阳县公安局关于机械硬盘的网上超市采购项目成交公告', date: '2023-04-13' },
            { id: 20, title: '青州市机关事务服务中心车辆保险成交公告', date: '2023-04-13' }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.announcement-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
  background-color: #f5f7fa;
}

.announcement-section {
  background-color: #fff;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #20b2aa;
  
  h2 {
    font-size: 18px;
    color: #333;
    margin: 0;
  }
  
  .more-link {
    color: #20b2aa;
    text-decoration: none;
    font-size: 14px;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

.announcement-list {
  list-style: none;
  padding: 0;
  margin: 0;
  
  li {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    
    &:last-child {
      border-bottom: none;
    }
  }
}

.announcement-item {
  display: flex;
  align-items: center;
  gap: 10px;
  
  .icon img {
    width: 16px;
    height: 16px;
  }
  
  .title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
    font-size: 14px;
    
    &:hover {
      color: #20b2aa;
      cursor: pointer;
    }
  }
  
  .date {
    color: #999;
    font-size: 12px;
    min-width: 80px;
    text-align: right;
  }
}

@media (max-width: 768px) {
  .announcement-container {
    grid-template-columns: 1fr;
  }
}
</style>